<template>
  <div>
    {{ form.model }}
    <n-button @click="click">disabled</n-button>
    <ocean :use="form"></ocean>
    <radio :options="options" type="button" :value="'1'"></radio>
  </div>

</template>

<script setup lang="tsx">
import { useForm, useController, useSetting, useCheckbox, useFormItems } from '@/ocean';
import { NInput } from 'naive-ui';
import Form1 from './dialog/form1.vue';
import Form2 from './dialog/form2.vue';
import { ref, reactive, watch } from 'vue';
import FormItem from '@/ocean/utils/class/FormItem';
import Radio from '@/ocean/components/Radio.vue';

let options = [
  { label: 'radio1', value: '1' },
  { label: 'radio2', value: '2' },
  { label: 'radio3', value: '3' },
]



let form = useForm({});

let a = form.setModel({
  name: '',
  test: '2323',
  children: [],
  check: ['1', '2'],
  radio: '1',
})


let createItems = (model, i) => {
  let children = useFormItems(model, { path: 'children.' + i });
  children.item('array姓名', 'name').input()
  children.item('array年龄', 'age').input()
  return children;
}

let childrenDom = () => {
  return (
    <div>
      {
        form.model['children'].map((m, i) => {
          return <div style="width:300px;display:inline-block">
            <ocean use={createItems(m, i)} />
          </div>
        })
      }
    </div>
  );
}

let age =
  form.item('年龄', 'age').input()
let name =
  form.item('姓名', 'name').input()
let childrenVNode =
  form.item('vnode 数组测试', 'children').define(Form2)
let test =
  form.item('define 测试', 'test').define(NInput, { disabled: true })
let childrenJSX =
  form.item('define 测试2', 'children').define(childrenDom)
let checkbox2 =
  form.item('checkbox 测试', 'check').checkbox({
    options: [{
      label: 'check 1',
      value: '1'
    }, {
      label: 'check 2',
      value: '2'
    }, {
      label: 'check 3',
      value: '3'
    }]
  })

let radio = form.item('radio 测试', 'radio').radio({
  type: "button",
  options: [{
    label: 'check 1',
    value: '1'
  }, {
    label: 'check 2',
    value: '2'
  }, {
    label: 'check 3',
    value: '3'
  }]
})

let [setChildrenItem, setChildren] = useSetting(childrenVNode);
setChildren({
  formModel: form.model,
  form: form,
})

let [setNameItem, setName] = useSetting(name)
setName({
  disabled: true
})


form.setModel({
  name: 'aaa',
  children: [{ cname: 'c1' }, { cname: 'c2' }]
})

function click() {
  form.model.children.push({})
  setName((o) => ({
    disabled: !o.disabled
  }))
}
</script>